<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-show:满足条件时展示，不满足时隐藏 -->
        <p>v-if和v-show的区别：
            1. 相同点是满足条件是显示，不满足时隐藏；
            2. v-show通过css的dispaly属性控制显隐；v-if通过元素控制；
            3. 频繁切换时应该用v-show；不频繁切换时可以用v-if；
            4. v-show的初始消耗比较大；v-if的初始化消耗比较小，不显示的节点直接跳过
        </p>
        <p v-show="isLogin">username: {{name}}</p>
        <button v-show="!isLogin" @click="isLogin = true">login</button>
        <hr>
        <p v-if="isLogin">username: {{name}}</p>
        <button v-else @click="isLogin = true">login</button>
        <hr>
        <p v-if="colorVal<=85">小家碧玉</p>
        <p v-else-if="colorVal>85 && colorVal<90">yyqx为你回头,也为你发愁</p>
        <p v-else-if="colorVal>=90 && colorVal<95">yyqx要和你官宣</p>
        <p v-else>后端程序员加班，前端程序员在家吃瓜</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                name: '的人',
                isLogin: true,
                colorVal: 85
            }
        })
    </script>
</body>
</html>